<template>
  <div class="record-filter-section">
    <div class="filter-row">
      <el-input
        v-model="searchQuery"
        placeholder="搜索患者姓名、病历号或诊断"
        class="search-input"
        :prefix-icon="Search"
        clearable
        @clear="emitUpdate"
        @input="emitUpdate"
      />
      <el-select 
        v-model="filterDepartment" 
        placeholder="全部科室" 
        clearable
        @change="emitUpdate"
      >
        <el-option
          v-for="dept in departments"
          :key="dept.value"
          :label="dept.label"
          :value="dept.value"
        />
      </el-select>
      <el-select 
        v-model="filterStatus" 
        placeholder="全部状态" 
        clearable
        @change="emitUpdate"
      >
        <el-option
          v-for="status in statusOptions"
          :key="status.value"
          :label="status.label"
          :value="status.value"
        />
      </el-select>
      <el-date-picker
        v-model="filterDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        @change="emitUpdate"
      />
      <el-button type="primary" :icon="Search" @click="emitSearch">搜索</el-button>
      <el-button :icon="Refresh" @click="emitReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

const props = defineProps({
  searchQuery: String,
  filterDepartment: String,
  filterStatus: String,
  filterDate: [String, Array]
})

const emit = defineEmits(['update:searchQuery', 'update:filterDepartment', 'update:filterStatus', 'update:filterDate', 'search', 'reset'])

const searchQuery = ref(props.searchQuery)
const filterDepartment = ref(props.filterDepartment)
const filterStatus = ref(props.filterStatus)
const filterDate = ref(props.filterDate)

// 模拟科室数据
const departments = ref([
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'pediatrics', label: '儿科' },
  { value: 'obstetrics', label: '妇产科' },
  { value: 'orthopedics', label: '骨科' }
])

// 状态选项
const statusOptions = ref([
  { value: 'completed', label: '已完成' },
  { value: 'pending', label: '待完善' },
  { value: 'urgent', label: '紧急' }
])

// 监听变化并触发更新
watch([searchQuery, filterDepartment, filterStatus, filterDate], () => {
  emit('update:searchQuery', searchQuery.value)
  emit('update:filterDepartment', filterDepartment.value)
  emit('update:filterStatus', filterStatus.value)
  emit('update:filterDate', filterDate.value)
})

const emitSearch = () => {
  emit('search')
}

const emitReset = () => {
  searchQuery.value = ''
  filterDepartment.value = ''
  filterStatus.value = ''
  filterDate.value = ''
  emit('reset')
}

const emitUpdate = () => {
  emit('search')
}
</script>

<style lang="scss" scoped>
.record-filter-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  
  .search-input {
    width: 300px;
  }
  
  .el-select {
    width: 140px;
  }
  
  .el-date-picker {
    width: 300px;
  }
}

// 响应式设计
@media (max-width: 992px) {
  .filter-row {
    .search-input {
      width: 100%;
    }
    
    .el-select,
    .el-date-picker {
      flex: 1;
      min-width: 150px;
    }
  }
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    
    .el-select,
    .el-date-picker {
      width: 100%;
    }
    
    .el-button {
      flex: 1;
    }
  }
}
</style>